<template>
  <el-drawer
    v-model="drawer"
    :direction="direction"
    :size="drawerWidth"
    :before-close="handleClose"
  >
    <div v-if="userCardData.discountType == 4" class="card-box">
      <div class="manage_tit">
        <div class="line"></div>
        <p>购买信息</p>
      </div>
      <div class="mt-2.5 mb-7">
        <div class="h-9 text-sm bg-color-F3F5F7 flex justify-between items-center px-4">
          <p>交易单号：{{ userCardData.couponsOrderId }}</p>
          <p>购买金额：{{ userCardData.purchaseAmount }}元</p>
        </div>
        <div class="text-sm px-4">
          <el-row>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip class="item" effect="dark" :content="userCardData.code" placement="top">
                <span>卡券编码：{{ userCardData.code }}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip class="item" effect="dark" :content="userCardData.name" placement="top">
                <span>卡券名称：{{ userCardData.name }}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <div v-for="item in dict?.type?.coupon_type" :key="item.value">
                <div v-if="item.value == String(userCardData.discountType)">
                  <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                    <span class="spanStyle">卡券类型：{{ item.label }}</span>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip
                class="item"
                effect="dark"
                :content="userCardData.subCode"
                placement="top"
              >
                <span>用户卡券编号：{{ userCardData.subCode }}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip
                class="item"
                effect="dark"
                :content="`${userCardData.cardUseNum}次`"
                placement="top"
              >
                <span>可用次数：{{ userCardData.cardUseNum }}次</span>
              </el-tooltip>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip
                class="item"
                effect="dark"
                :content="`${userCardData.cardUseNumDay}次`"
                placement="top"
              >
                <span>每日限次：{{ userCardData.cardUseNumDay }}次</span>
              </el-tooltip>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>
                  <div v-if="userCardData.lifespanType === 1">
                    领券当日{{ userCardData.lifespanDay }}天有效
                  </div>
                  <div v-else>
                    {{ userCardData.lifespanStartTime }}
                    至
                    {{ userCardData.lifespanEndTime }}
                  </div>
                </template>
                <div class="flex items-center">
                  有效期：
                  <div class="flex-1 w-0 validity_date">
                    <div v-if="userCardData.lifespanType === 1">
                      领券当日{{ userCardData.lifespanDay }}天有效
                    </div>
                    <div v-else>
                      {{ userCardData.lifespanStartTime }}
                      至
                      {{ userCardData.lifespanEndTime }}
                    </div>
                  </div>
                </div>
              </el-tooltip>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip
                class="item"
                effect="dark"
                :content="userCardData.nickName"
                placement="top"
              >
                <span>用户名：{{ userCardData.nickName }}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip class="item" effect="dark" :content="userCardData.mobile" placement="top">
                <span>手机号：{{ userCardData.mobile }}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip
                class="item"
                effect="dark"
                :content="userCardData.createTime"
                placement="top"
              >
                <span>购买时间：{{ userCardData.createTime }}</span>
              </el-tooltip>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <div v-if="userCardData.discountType != 4" class="card-box">
      <div class="manage_tit">
        <div class="line"></div>
        <p>购买信息</p>
      </div>
      <div class="mt-2.5">
        <div class="h-9 text-sm bg-color-F3F5F7 flex justify-between items-center px-4">
          <p>交易单号：{{ userCardData.couponsOrderId }}</p>
          <p>购买金额：{{ userCardData.purchaseAmount }}元</p>
        </div>
        <div class="text-sm px-4">
          <el-row>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip class="item" effect="dark" :content="userCardData.code" placement="top">
                <span>优惠券编码：{{ userCardData.code }}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip class="item" effect="dark" :content="userCardData.name" placement="top">
                <span>优惠券名称：{{ userCardData.name }}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <div v-for="item in dict?.type?.coupon_type" :key="item.value">
                <div v-if="item.value == String(userCardData.discountType)">
                  <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                    <span class="spanStyle">优惠券类型：{{ item.label }}</span>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip
                class="item"
                effect="dark"
                :content="userCardData.subCode || ''"
                :disabled="userCardData.subCode == null"
                placement="top"
              >
                <span>用户卡券编号：{{ userCardData.subCode }}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <span>优惠券面值：{{ userCardData.moneyAmount }}元</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>
                  <div v-if="userCardData.discountType == 3">
                    订单满{{ userCardData.useAmount }}元
                  </div>
                  <div v-else>无门槛</div>
                </template>
                <p>
                  <span>使用条件：</span>
                  <span v-if="userCardData.discountType == 3"
                    >订单满{{ userCardData.useAmount }}元可用</span
                  >
                  <span v-else>无门槛</span>
                </p>
              </el-tooltip>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>
                  <div v-if="userCardData.lifespanType === 1">
                    领券当日{{ userCardData.lifespanDay }}天有效
                  </div>
                  <div v-else>
                    {{ userCardData.lifespanStartTime }}
                    至
                    {{ userCardData.lifespanEndTime }}
                  </div>
                </template>
                <div class="flex items-center">
                  有效期：
                  <div class="flex-1 w-0 validity_date">
                    <div v-if="userCardData.lifespanType === 1">
                      领券当日{{ userCardData.lifespanDay }}天有效
                    </div>
                    <div v-else>
                      {{ userCardData.lifespanStartTime }}
                      至
                      {{ userCardData.lifespanEndTime }}
                    </div>
                  </div>
                </div>
              </el-tooltip>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <p>
                适用场馆：
                <span>
                  {{ userCardData.applyStadiumType === '1' ? '全部场馆' : '指定场馆' }}
                </span>
              </p>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <p>
                适用类型：
                <span>
                  {{ userCardData.applySportType === '1' ? '全部类型' : '指定类型' }}
                </span>
              </p>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <p>
                适用时间：
                <span v-if="userCardData.limitTimeType === '1'"> 全部时间 </span>
                <span v-else>
                  {{ `${userCardData.limitStartTime}-${userCardData.limitEndTime}不可用` }}
                </span>
              </p>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip
                class="item"
                effect="dark"
                :content="userCardData.nickName"
                placement="top"
              >
                <span>用户名：{{ userCardData.nickName }}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip class="item" effect="dark" :content="userCardData.mobile" placement="top">
                <span>手机号：{{ userCardData.mobile }}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip
                class="item"
                effect="dark"
                :content="userCardData.createTime"
                placement="top"
              >
                <span>购买时间：{{ userCardData.createTime }}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip class="item" effect="dark" :content="userCardData.state" placement="top">
                <p>
                  使用状态：
                  <span v-if="userCardData.state === 0">未使用</span>
                  <span v-if="userCardData.state === 1">已使用</span>
                  <span v-if="userCardData.state === 2">已过期</span>
                </p>
              </el-tooltip>
            </el-col>
          </el-row>
          <el-row v-if="userCardData.orderNo != null">
            <el-col :span="5" class="coupons_card_row_item">
              <el-tooltip
                class="item"
                effect="dark"
                :content="userCardData.createTime"
                placement="top"
              >
                <span>关联单号：{{ userCardData.orderNo }}</span>
              </el-tooltip>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <div v-if="userCardData.discountType == 4" class="card-box">
      <div class="manage_tit">
        <div class="line"></div>
        <p>使用记录</p>
      </div>
      <div class="mt-2.5">
        <el-table :data="list" v-loading="loading">
          <el-table-column label="使用时间" align="center" prop="useTime" show-overflow-tooltip />
          <el-table-column label="使用记录" align="center" prop="useCount" show-overflow-tooltip />
          <el-table-column
            label="使用场馆"
            align="center"
            prop="stadiumName"
            show-overflow-tooltip
          />
          <el-table-column
            label="剩余次数"
            align="center"
            prop="surplusCount"
            show-overflow-tooltip
          />
          <el-table-column
            label="剩余天数"
            align="center"
            prop="surplusDayCount"
            show-overflow-tooltip
          />
        </el-table>

        <pagination
          v-show="queryParams.total > 0"
          :total="queryParams.total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, defineExpose } from 'vue'
import { useDict } from '@/utils/dict'
import { payHistory, usePage } from '@/api/coupon/coupon'
import Pagination from '@/components/Pagination/index.vue'

// 字典数据
const { dict } = useDict({
  dicts: ['coupon_type', 'limit_type'],
})

// 定义 emits
const emit = defineEmits(['refreshShow'])

// 定义响应式数据
const id = ref<number | null>(null)
const drawer = ref(false)
const direction = ref('rtl')
const drawerWidth = ref('52%')
const userCardData = ref<any>({})
const loading = ref(false)
const list = ref<any[]>([])

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  couponsUserId: null as number | null,
})

// 加载数据
const init = (val: number) => {
  id.value = val
  queryParams.couponsUserId = val
  drawer.value = true
  getPayHistoryPage()
  getList()
}

// 查询卡券信息
const getPayHistoryPage = () => {
  payHistory({ id: id.value }).then((res: any) => {
    if (res.rows.length > 0) {
      userCardData.value = res.rows[0]
    }
  })
}

const handleClose = () => {
  drawer.value = false
  emit('refreshShow')
}

const getList = () => {
  usePage(queryParams).then((res: any) => {
    list.value = res.rows
    queryParams.total = res.total
  })
}

// 暴露方法给父组件
defineExpose({
  init,
})
</script>

<style scoped lang="scss">
:deep(.el-drawer) {
  .el-icon-close {
    color: #383838;
  }
  .el-row {
    .el-col {
      margin-top: 15px;
    }
    .el-col-5 {
      width: 20%;
    }
  }
}
.card-box {
  padding: 0 15px;
}
.coupons_card {
  padding: 0 15px 15px;
  background: rgba(243, 245, 247, 1);
  font-size: 14px;
  color: #383838;
  line-height: 21px;
  .coupons_card_row {
    margin: 0 0 10px 0;
  }
}
.coupons_card_row_item {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.validity_date div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
